<template>
    <el-container class="applet">
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <div class="cms-btn-group">
                        <el-button type="primary" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                        <el-button type="primary" icon="fa fa-plus" @click="create()" size="small"> 新增</el-button>
                    </div>
                    <el-table ref="multipleHandle"
                              v-loading="loading"
                              element-loading-text="努力加载中..."
                              element-loading-spinner="el-icon-loading"
                              tooltip-effect="dark" :data="listData" border>
                        <el-table-column align="center" prop="id" label="编号" width="80"></el-table-column>
                        <el-table-column prop="thumb_url" label="图片" width="120">
                            <template slot-scope="scope">
                                <el-popover placement="right" trigger="click">
                                    <img :src="scope.row.thumb_url"/>
                                    <el-button slot="reference" style="border: none;height: 80px;padding: 0;overflow: hidden">
                                        <img title="点击查看原图" alt="点击查看原图" :src="scope.row.thumb_url"
                                             style="height: 80px;width: 80px"/>
                                    </el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="title" label="消息标题" width="200"></el-table-column>
                        <el-table-column align="center" prop="description" label="消息描述" width="200"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="edit(scope.row)" icon="fa fa-edit" type="primary" size="mini" plain>
                                    编辑
                                </el-button>
                                <el-button @click="destroy(scope.row.id)" icon="fa fa-trash"
                                           type="danger" size="mini" plain> 删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </section>
        </el-main>

        <!-- 表单弹窗 @open="resetForm('form')"-->
        <el-dialog
                v-if="dialog.show"
                :title="dialog.title"
                custom-class="cms-dialog"
                :top="dialog.top"
                :visible.sync="dialog.show"
                :width="dialog.width">
            <el-form :model="form" ref="form" label-width="80px">
                <el-form-item :rules="[{ required: true, message: '请填写消息标题', trigger: 'blur'}]" label="消息标题"  prop="title">
                    <el-input style="width: 100%;" v-bind:content="form.title"
                              v-model="form.title" placeholder="请填写消息标题"></el-input>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请填写消息描述', trigger: 'blur'}]" label="消息描述"  prop="description">
                    <el-input style="width: 100%;" v-bind:content="form.description"
                              v-model="form.description" placeholder="请填写消息描述"></el-input>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请填写链接地址', trigger: 'blur'}]" label="链接地址" prop="url">
                    <el-input style="width: 100%;" v-bind:content="form.url"
                              v-model="form.url" placeholder="请填写链接地址"></el-input>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="13"><el-form-item required :rules="[{ required: true, message: '请上传封面图', trigger: 'change'}]" label="封面图：" prop="thumb_url">
                        <el-upload
                                class="index-avatar-uploader"
                                :action="upload"
                                :headers="myHeaders"
                                :show-file-list="false"
                                name="image"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="form.thumb_url" :src="form.thumb_url"
                                 class="index-avatar">
                            <i v-else class="el-icon-plus index-avatar-uploader-icon"></i>
                        </el-upload>
                        <el-tag type="danger" style="margin-bottom:10px;">上传封面图片格式只能是 JPG | PNG | GIF</el-tag>
                        <el-tag type="danger" style="margin-bottom:10px;">上传封面图片大小不能超过 100KB!</el-tag>
                    </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.show = false">取 消</el-button>
                <el-button type="primary" @click="update('form')">确 定</el-button>
              </span>
        </el-dialog>

    </el-container>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {
        customList,
        customUpdate,
        customDestory
    } from '@/utils/request';

    export default {
        components: {},
        data() {
            return {
                userInfo:this.$storage.get('userinfo'),
                listData: [],//列表数据
                params: {
                    applet: "yeshi"
                },
                dialog: {
                    title: '',
                    top: '5vh',
                    show: false,
                    width: '550px'
                },
                form:null,
                multipleSelection: [],//多选项
                myHeaders: {
                    'Authorization': 'Bearer ' + this.$storage.get('token'),
                    'Accept': 'application/json'
                },
            }
        },
        activated() {
            this.$store.dispatch('setYeShiActive', '/yeshi/wechats_custom');
            this.list();
        },
        computed: {
            ...mapGetters(['loading', 'upload']),
        },
        methods: {
            //新增
            create(){
                this.form = {
                    id:0,
                    title:'',
                    description: '',
                    applet:'yeshi',
                    url:'',
                    thumb_url:'',
                };
                this.dialog.title = '新增客服消息';
                this.dialog.show = true;
            },
            //编辑
            edit(info){
                this.form = {
                    id:info.id,
                    title:info.title,
                    description: info.description,
                    applet:'yeshi',
                    url:info.url,
                    thumb_url:info.thumb_url,
                };
                this.dialog.title = '编辑客服消息';
                this.dialog.show = true;
            },
            //删除
            destroy(id) {
                let msg;
                if (id.length) {
                    msg = '确定要删除选中的客服信息吗？';
                } else {
                    msg = '确定要删除该客服信息吗？';
                }
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'cms-message-box',
                    type: 'warning'
                }).then(() => {
                    customDestory({id: id, applet: this.params.applet}).then((res) => {
                        if (res.code) {
                            this.$message.error(res.msg);
                        } else {
                            this.list();
                        }
                    });
                }).catch(() => {
                });
            },
            // 更新
            update(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        customUpdate(this.form).then((res) => {
                            if (res.code) {
                                this.$message.error(res.msg);
                            } else {
                                this.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: res.msg,
                                    onClose: () => {
                                        this.dialog.show = false;
                                        this.list();
                                    }
                                });
                            }
                        });
                    }
                });
            },
            //列表
            list() {
                this.$store.dispatch('setLoading', true);
                customList({params: this.params}).then((res) => {
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.listData = res.data;
                    }
                    this.$store.dispatch('setLoading', false);
                })
            },
            //上传封面
            handleAvatarSuccess(res, file) {
                this.form.thumb_url = res.data;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                const isLt2M = file.size / 1024 < 100;
                if (!isJPG) {
                    this.$message.error('上传封面图片只能是 JPG | PNG | GIF格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传封面图片大小不能超过 100KB!');
                }
                let width = 80;
                let height = 80;
                const isSize = new Promise(function (resolve, reject) {
                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    img.onload = function () {
                        let valid = true;
                        valid ? resolve() : reject();
                    };
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    this.$message.error('上传的封面图宽高必须是' + width + '*' + height + ' PX !');
                    return Promise.reject();
                });
                return isJPG && isLt2M && isSize;
            },
        }
    }
</script>
<style scoped>
    .index-avatar-uploader .el-upload {

        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .index-avatar-uploader-icon {
        border: 1px dashed #d9d9d9;
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }
</style>